 <template>
  <div class="card-box">
    <div class="user-box-title" :style="back">
      <mu-avatar slot="avatar" size="70">
        <img :src="userinfo.userhead" />
      </mu-avatar>
     <p>{{userinfo.username}}</p>
      <p>{{userinfo.mobile}}</p>
      <p class="sx-btn" @click="openBotttomSheet">筛选</p>
    </div>
<div class="c-list-box">
  <div class="bdcard">
        <input maxlength="10" type="text" placeholder="请输入卡号" class="bd-input" v-model="cardno" />
        <span class="bd-text" @click="bindcard">绑定</span>
      </div>
</div>
    <div class="c-list-box List-c">

      <div class="sing-card " v-for="(item,index) in cardList" :key="index">
        <mu-expansion-panel :expand="panel === index" @change="toggle(index)">
          <div slot="header" class="card-title" :style="cardback">
            <div class="idr">IDR</div>
            <span class="card-id">{{item.cardNo}}</span>
            <span class="fright card-money">¥{{item.sum||'0'}}</span>
          </div>
          <ul class="card-info">
            <li>
              <span class="fleft">电话</span>
              <span class="fright">{{item.mobile||'无'}}</span>
              <div class="_clear"></div>
            </li>
            <li v-if="item.bindTime">
              <span class="fleft">绑定时间</span>
              <span class="fright">{{item.bindTime}}</span>
              <div class="_clear"></div>
            </li>
            <li>
              <span class="fleft">状态</span>
              <span class="fright" v-if="item.state ==='6001'">正常</span>
              <span class="fright" v-else-if="item.state ==='6002'">已挂失</span>
              <span class="fright" v-else>未启用</span>
              <div class="_clear"></div>
            </li>
            <li @click="chongzhi(item.cardNo,item.state)" class="hardle">
              <span class="hardle-text"  :style="item.state|state">充值</span>

            </li>
          </ul>
        </mu-expansion-panel>
      </div>
        <div v-show="nolist" class="nolist">
        <span class="iconfont icon-charging"></span>
        <p>暂无卡片</p>
      </div>
    </div>

    <mu-bottom-sheet :open.sync="open" class="card-choose">
      <mu-form :model="form" label-width="100">
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
             <span size="30"  class="iconfont icon-sousuo"></span>
              <input
                maxlength="10"
                type="text"
                class="choose-input"
                placeholder="请输入卡号"
                icon="comment"
                v-model="form.cardid"
              />
            </div>
          </mu-list-item>
          <mu-list-item>
            <mu-form-item prop="radio" label="状态">
              <mu-radio v-model="form.radio" value="6001" label="正常"></mu-radio>
              <mu-radio v-model="form.radio" value="6002" label="已挂失"></mu-radio>
            </mu-form-item>
          </mu-list-item>
          <mu-list-item>
            <mu-button class="btn big-btn" @click="closeBottomSheet">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
    </mu-bottom-sheet>
  </div>
</template>

<script>
import { Toast } from "vant";
import "vant/lib/toast/style/index";

export default {
  data() {
    return {
       userinfo: {
        userhead: this.$store.state.userinfo.headImage,
        username: this.$store.state.userinfo.userName,
        mobile: this.$store.state.userinfo.mobile
      },
      nolist:true,
      open: false,
      cardno: "",
      panel: "",
      form: {
        radio: "",
        cardid: ""
      },
      back: {
        background:
          "url(" + require("../../../assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      cardback: {
        background: "url(" + require("../../../assets/image/cardbimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      cardList: []
    };
  },
  watch:{
    cardList:function(v){
      if(v==''){
        this.nolist=true;
      }else{
        this.nolist=false;
      }
    }
  },
  filters:{
    state:function(v){
      switch (v) {
        case '6002':
          return "color:#d8d8d8"
          break;

        default:
          break;
      }
    }
  },
  methods: {
    queryCardlist(){
        this.$api.queryUserCard().then(res => {
            if (res.data.code == 0) {

                this.cardList = res.data.result;
            } else {
                this.cardList = "";
            }
        });
    },
    toggle(panel) {
      this.panel = panel === this.panel ? "" : panel;
    },
    chongzhi(cardId,state){
      if(state =='6002'){

        return;
      }
       this.$store.dispatch("setChargingCardID", cardId);

       this.$router.push("/cardinvest");
    },
    bindcard() {
      if (this.cardno != "") {

        this.$api.bindCard(this.cardno).then(res => {
          let data = res.data;
          console.log(data)
          if (data.code != 0) {
           Toast(data.msg);
            this.cardno = "";
          } else {
            Toast("绑定电卡成功");
              this.queryCardlist()
            this.cardno = "";
          }
        });
      } else {
    Toast("请输入电卡号");
      }
    },
    closeBottomSheet() {
      this.open = false;

      this.$api.queryUserCard(this.form.cardid, this.form.radio).then(res => {
        if (res.data.code == 0) {
          this.cardList = res.data.result;
        } else {
          this.cardList = "";
        }
      });
    },
    openBotttomSheet() {
      this.open = true;
    },

  },
  created() {
    this.queryCardlist()
  }
};
</script>

<style>
</style>
